<template>
  <div class="root">
    <Child v-if='number==0'></Child>
    {{ number }}
    <button @click="add">add</button>
  </div>
</template>

<script>
import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref } from "vue";
import Child from "./Child.vue";
export default {
  components:{
    Child
  },
  setup() {
    onBeforeMount(() => {
      console.log("dom创建之前");
    });

    onMounted(() => {
      console.log("订阅、ajax、dom创建之后、swiper、echats初始化");
    });

    // 每当组件实例中的状态被改变时，onBeforeUpdate和onUpdated就会依次触发。比如这里的number.value改变就会触发
    onBeforeUpdate(() => {
      console.log("更新之前");
    });

    onUpdated(() => {
      console.log("更新之后");
    });

    // 为了演示销毁阶段，我们创建了一个子组件，所以onBeforeUnmount和onUnmounted在子组件中演示

    const number = ref(0);
    const add = () => {
      number.value++;
    };

    return {
      number,
      add,
    };
  },
};
</script>

<style scoped>
</style>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>
